<template>
  <!-- 总充电量折线图 -->
  <div class="echartsTwinHealth-box">
    <div id="echartsTwinHealth"></div>
    <!-- <div class="echartsTwinHealth-title">
      <div class="excellent">
        <div class="border"></div>
        <div class="excellent-item">优</div>
      </div>
      <div class="send">
        <div class="border"></div>
        <div class="send-item">差</div>
      </div>
      <div class="unit">单位: %</div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(
    document.getElementById("echartsTwinHealth")
  )
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(document.getElementById("echartsTwinHealth"), null, {
    renderer: "svg"
  })

  let option = {
    // tooltip: {
    //   trigger: "axis",
    //   // 设置浮层的 css 样式
    //   extraCssText:
    //     "width:80px;height:auto;background-color:rgba(0,0,0,0.3);color:#fff",
    //   formatter: function (params) {
    //     // console.log(params[0])
    //     //params[0].name表示x轴数据
    //     let str = params[0].name + "<br/>"
    //     //params是数组格式
    //     for (let item of params) {
    //       //设置浮层图形的样式跟随图中展示的颜色
    //       str +=
    //         "<span style='display:inline-block;width:10px;height:10px;border-radius:10px;background-color:" +
    //         params[0].color.colorStops[0].color +
    //         ";'></span>" +
    //         item.value
    //     }
    //     return str
    //   }
    // },
    grid: [
      {
        left: "8%",
        right: "60%",
        top: "5%",
        bottom: "10%"
      },
      {
        left: "65%",
        right: "8%",
        top: "5%",
        bottom: "10%"
      }
    ],
    xAxis: [
      {
        type: "value",
        inverse: true,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisLabel: {
          show: true,
          verticalAlign: "middle",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        }
      },
      {
        gridIndex: 1,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          verticalAlign: "middle",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        name: "",
        type: "category",
        offset: -5,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 10,
          color: "#fff"
        },
        data: ["1号电池仓", "2号电池仓", "3号电池仓", "4号电池仓", "5号电池仓"],
        position: "right"
      },
      {
        type: "category",
        offset: -5,
        gridIndex: 1,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 10,
          color: "#fff"
        },
        data: ["6号电池仓", "7号电池仓", "8号电池仓", "9号电池仓", "10号电池仓"]
      }
    ],
    series: [
      // 如果要放到底下必须写在前面不然会被盖上
      {
        type: "bar",
        data: [100, 100, 100, 100, 100],
        barWidth: 8,
        color: "#00f3df",
        barGap: "-100%",
        xAxisIndex: 0, // 这来判断在哪边
        yAxisIndex: 0, // 这来判断在哪边
        // 取消移入高亮
        emphasis: {
          disabled: true,
          focus: "none"
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 0, 0, 0],
            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#73a798"
              },
              {
                offset: 1,
                color: "#73a798"
              }
            ])
          }
        }
      },
      {
        type: "bar",
        data: [100, 100, 100, 100, 100],
        barWidth: 8,
        color: "#00f3df",
        barGap: "-100%",
        xAxisIndex: 1, // 这来判断在哪边
        yAxisIndex: 1, // 这来判断在哪边
        emphasis: {
          disabled: true,
          focus: "none"
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 0, 0, 0],
            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#7a9ec2"
              },
              {
                offset: 1,
                color: "#7a9ec2"
              }
            ])
          }
        }
      },
      {
        colId: "col402utokg",
        type: "bar",
        data: [98, 50, 88, 30, 20],
        barWidth: 8,
        color: "#00f3df",
        xAxisIndex: 0, // 这来判断在哪边
        yAxisIndex: 0, // 这来判断在哪边
        label: {
          normal: {
            distance: -175,
            show: true,
            position: "right",
            color: "#fff",
            fontSize: 10,
            formatter: (params) => {
              var text = params.data + "%"
              return text
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 0, 0, 0],
            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#eaffdc"
              },
              {
                offset: 1,
                color: "#eaffdc"
              }
            ])
          }
        }
      },
      {
        colId: "col3kkgr6h9",
        type: "bar",
        data: [98, 50, 88, 30, 20],
        barWidth: 8,
        color: "#01b3e0",
        xAxisIndex: 1, // 这来判断在哪边
        yAxisIndex: 1, // 这来判断在哪边
        label: {
          normal: {
            distance: -155,
            show: true,
            position: "left",
            color: "#fff",
            fontSize: 10,
            formatter: (params) => {
              var text = params.data + "%"
              return text
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 0, 0, 0],
            color: new $echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#c5f1ff"
              },
              {
                offset: 1,
                color: "#c5f1ff"
              }
            ])
          }
        }
      }
    ]
  }
  setTimeout(() => {
    myChart.resize()
  }, 500)
  myChart.setOption(option)
}
</script>
<style scoped lang="less">
.echartsTwinHealth-box {
  width: 100%;
  height: 100%;
  position: relative;
  #echartsTwinHealth {
    width: 100%;
    height: 100%;
  }
  .echartsTwinHealth-title {
    position: absolute;
    top: 5px;
    width: 100%;
    height: 20px;
    display: flex;
    .excellent {
      margin-left: 300px;
      width: 30px;
      height: 20px;
      display: flex;
      align-items: center;
      .border {
        box-sizing: border-box;
        width: 10px;
        height: 4px;
        border: 4px solid #4dffa6;
      }
      .excellent-item {
        margin-left: 3px;
        color: #fff;
        font-size: 13px;
      }
    }
    .send {
      margin-left: 30px;
      width: 30px;
      height: 20px;
      display: flex;
      align-items: center;
      .border {
        box-sizing: border-box;
        width: 10px;
        height: 4px;
        border: 4px solid #1c94f7;
      }
      .send-item {
        margin-left: 3px;
        color: #fff;
        font-size: 13px;
      }
    }
    .unit {
      margin-left: 30px;
      width: 30px;
      height: 20px;
      // background-color: pink;
      font-size: 8px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      font-weight: 600;
    }
  }
}
</style>
